<template>
    <div>
        <el-dialog
            @close="closeEditCustomerRelationship"
            :before-close="handleClose"
            title="Edit Related Customer"
            v-dialog-drag
            :visible.sync="visible">
            <el-form ref="editCustomerRelationshipForm" :model="editCustomerRelationshipForm"
                     :rules="addCustomerRelationshipRules" size="medium" label-width="100px"
                     label-position="left">
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="customerId">
                            <el-input v-model="customer.customerId" :disabled='true'
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="120px" label="customerName">
                            <el-input v-model="customer.customerName" :disabled='true'
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">
                        <el-form-item label-width="120px" label="relativeCustomerId" prop="relativeCustomerId2">
                            <el-input v-model="editCustomerRelationshipForm.relativeCustomerId2" :disabled='true'
                                      clearable
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="120px" label="relativeCustomerName" prop="relativeCustomerName">
                            <el-select v-model="editCustomerRelationshipForm.relativeCustomerName"
                                       placeholder="Please input relativeCustomerName"
                                       clearable
                                       value-key="customerId"
                                       @change="onSelectCustomer"
                                       :style="{width: '100%'}">
                                <el-option v-for="(item, index) in options.relativeCustomerNameOptions"
                                           :key="index"
                                           :label="item.label"
                                           :value="item.value"
                                           :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">
                        <el-form-item label-width="120px" label="customerRelationId" prop="customerRelationId">
                            <el-input v-model="editCustomerRelationshipForm.customerRelationId" :disabled='true'
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="120px" label="customerRelationName" prop="customerRelationName">
                            <el-select v-model="editCustomerRelationshipForm.customerRelationName" placeholder="Please choose 客户关系"
                                       filterable clearable
                                       value-key="id"
                                       @change="onSelectRelation"
                                       :style="{width: '100%'}">
                                <el-option v-for="(item) in options.customerRelationNameOptions" :key="item.id"
                                           :label="item.label" :value="item.id"
                                           :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="resetEditCustomerRelationship">Cancel</el-button>
                <el-button type="primary" size="medium" @click="handleEditCustomerRelationship">Edit</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "EditCustomerRelationshipDialog",
    props: ['visible', 'onClose', 'callback', 'options', 'customer'],
    data() {
        return {
            editCustomerRelationshipForm: {

                relativeCustomerId2: undefined,
                relativeCustomerName: undefined,
                customerRelationId: "",
                customerRelationName: "",

            },
            addCustomerRelationshipRules: {
                customerId: [{
                    required: true,
                    message: '',
                    trigger: 'blur'
                }],
                customerName: [{
                    required: true,
                    message: '',
                    trigger: 'blur'
                }],
                relativeCustomerId2: [],
                relativeCustomerName: [{
                    required: true,
                    message: 'Please input relativeCustomerName',
                    trigger: 'change'
                }],
                customerRelationName: [{
                    required: true,
                    message: 'Please choose customerRelationName',
                    trigger: 'change'
                }],
            },

        }
    },
    methods: {
        init(){
            this.$axios.post(
                '/customer/customer/queryAllCustomer'
            ).then(res =>{
                this.options.relativeCustomerNameOptions = [];
                for(var i=0;i<res.data.obj.length;i++){
                    var item={ "label": "", "value": ""}
                    item.label=res.data.obj[i].customerName
                    item.value=res.data.obj[i].customerId
                    this.options.relativeCustomerNameOptions.push(item)
                }
                console.log(this.options.relativeCustomerNameOptions)
            });
        },
        resetEditCustomerRelationship() {
            this.$refs['editCustomerRelationshipForm'].resetFields();
            this.closeEditCustomerRelationship()
        },
        closeEditCustomerRelationship() {
            this.onClose()
        },
        handleEditCustomerRelationship() {
            this.$refs['editCustomerRelationshipForm'].validate(valid => {
                if (!valid) return
                //获取label
                let obj = {};
                obj = this.options.customerRelationNameOptions.find((item)=>{
                    return item.id === this.editCustomerRelationshipForm.customerRelationId;
                });
                let getLabel = ''
                getLabel = obj.label;
                //处理返回的数据
                var dd = {
                    relativeCustomerId2: this.editCustomerRelationshipForm.relativeCustomerId2,
                    relativeCustomerName: this.editCustomerRelationshipForm.relativeCustomerName,
                    customerRelationId: this.editCustomerRelationshipForm.customerRelationId,
                    customerRelationName: getLabel
                }
                this.callback(dd)
                this.$refs['editCustomerRelationshipForm'].resetFields();
                this.closeEditCustomerRelationship()
                this.$message.success("Edit success!")

            })
        },
        onSelectCustomer(value) {
            this.editCustomerRelationshipForm.relativeCustomerId2 = value
        },
        onSelectRelation(value){
            this.editCustomerRelationshipForm.customerRelationId = value
        },
        handleClose(){
            this.$refs['editCustomerRelationshipForm'].resetFields();
            this.closeEditCustomerRelationship()
        },
        //父组件调用此方法设置数值
        setData(data) {
            this.editCustomerRelationshipForm = data
        }

    },
    mounted() {
        console.log('mounted')
    }
}
</script>

<style scoped>

</style>